<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>截流防抖</title>
</head>
<body>
    <div id="a" style="height: 200px;background-color: aqua;">a</div>
    <br>
    <div id="b" style="height: 200px;background-color: pink;">b</div>

    <script>
        const OA = document.querySelector('#a')
        const OB = document.querySelector('#b')

function debounce(fn, time) {
  let timer = null,
    last = 0

  return function (...args) {
    const now = Date.now();
    if (now - last > 0) {
      clearTimeout(timer);

      timer = setTimeout(() => {
        last = now;
        fn && fn.call(this, ...args);
      }, time);
    }
  };
}

function throttle(fn,time){
    let timer = null,that = this;

    return function(...args){
        if(timer)  return
        timer = setTimeout(() => {
            fn && fn.call(that,...args)
            clearTimeout(timer)
        }, time);
    }
}

function fn(e){
console.log(e);
}

OA.addEventListener('mousemove',debounce(fn,300))
OB.addEventListener('mousemove',throttle(fn,300))

    </script>
</body>


</html>